/* 改变主题色变量 */
$--color-primary: $theme;
$--color-warning: $orange;
$--color-danger: $red;

/* 改变 icon 字体路径变量，必需 */
$--font-path: "~element-ui/lib/theme-chalk/fonts";

@import "~element-ui/packages/theme-chalk/src/index";
@import "../iconfont/iconfont.css";
@import "./common.scss";
@import "./mixin.scss";

::-webkit-input-placeholder { /* WebKit browsers */
  color: $fourth-text-color !important;
}
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
  color: $fourth-text-color !important;
}
::-moz-placeholder { /* Mozilla Firefox 19+ */
  color: $fourth-text-color !important;
}
:-ms-input-placeholder { /* Internet Explorer 10+ */
  color: $fourth-text-color !important;
}

/* 重置外部引用样式 */
.app {
  // 分页器
  .el-pagination.is-background {
    > .el-pagination__sizes .el-input__inner {
      color: $text-color;
    }

    .btn-prev,
    .btn-next,
    .el-pager li {
      font-weight: 400;
      color: $text-color;
      background-color: #fff;
      border: 1px solid $fifth-text-color;
      border-radius: 2px;
    }

    .btn-prev:disabled,
    .btn-next:disabled {
      color: $second-text-color;
    }

    .el-pagination__jump {
      margin-left: 0;
    }

    .el-input--mini .el-input__inner {
      height: 32px;
      line-height: 32px;
    }
  }

  // form元素
  .el-form-item {
    margin-bottom: 16px;

    &__label {
      padding: 0;
      color: $text-color;
    }

    &__label,
    &__content {
      line-height: 36px;
    }
  }

  .el-form--inline .el-form-item {
    margin-right: 24px;
  }
  .el-switch.is-checked .el-switch__core{
    background-color: $purple;
    border-color: $purple;
  }
  .el-radio__input.is-checked + .el-radio__label{
    color: $purple;
  }
  .el-radio__input.is-checked .el-radio__inner{
    background-color: $purple;
    border-color: $purple;
  }
  .el-input {
    &__inner {
      height: 36px;
      padding: 0 30px 0 12px;
      color: $text-color;
      border: 1px solid $border;
    }
  }

  .el-select:hover .el-input__inner,
  .el-input__inner {
    border-color: $border;

    &:focus {
      border-color: $primary;
    }

    &::placeholder {
      color: $fourth-text-color;
    }
  }

  .el-button {
    border-radius: 2px;
    // &--default:focus{
    //   color: $purple;
    //   background-color:rgba(117, 60, 202, 0.2);
    //   border-color: $purple;
    // }
    &--primary{
      background-color: $purple;
      border-color: $purple;
    }
    &--text {
      font-size: 13px;
      color:$purple;
    }

    &--medium {
      height: 36px;
    }
  }

  .el-button + .el-button {
    margin-left: 8px;
  }

  .el-tag {
    height: 28px;
    font-size: 14px;
    line-height: 28px;
  }

  .el-tabs {
    &__item {
      color: $content;
    }
  }

  .el-tabs--border-card > .el-tabs__header .el-tabs__item.is-active {
    color: $purple;
  }
  .el-checkbox.is-checked .el-checkbox__label {
    color: $purple !important;
  }
  .el-checkbox__input.is-checked .el-checkbox__inner {
    background-color: $purple;
    border-color: $purple;
  }

  .el-tree--highlight-current .el-tree-node.is-current > .el-tree-node__content {
    background-color: rgba(117, 60, 202, 0.15);
  }

  .el-checkbox {
    &__input {
      height: 12px;
    }

    &__inner {
      width: 12px;
      height: 12px;
      border-radius: 1px;

      &::after {
        left: 3px;
        height: 6px;
      }
    }
  }

  .el-range {
    &__icon, &__separator, &__close-icon {
      @include flex-center;
    }

    &__icon {
      margin-right: 7px;
    }

    &-editor.el-input__inner {
      padding: 3px 7px;
    }
  }
}

.el-time-popper {
  width: 120px !important;
}

/* 重置外部引用样式 - 挂载在document的元素特殊处理 */
body {
  .el-select-dropdown__item {
    padding: 0 12px;
  }

  .hide-select-popper {
    display: none;
  }

  .el-select-dropdown {
    &__item.hover,
    &__item:hover {
      background-color: $textBg;
    }
  }

  .el-date {
    &-table {
      &__row {
        td {
          height: 24px;
          line-height: 24px;

          > div {
            height: 24px;
            padding: 0;
            line-height: 24px;

            > span {
              border-radius: 2px;
            }
          }
        }
      }

      td.start-date div {
        margin-left: 10px;
        border-top-left-radius: 0;
        border-bottom-left-radius: 0;
      }

      td.end-date div {
        margin-right: 10px;
        border-top-right-radius: 0;
        border-bottom-right-radius: 0;
      }

      td.in-range div {
        background-color: $textBg;

        &:hover {
          background-color: $textBg;
        }
      }
    }

    &-editor {
      .el-range-input {
        color: $text-color;
        text-align: left;
      }

      .el-range-separator {
        @include flex-center;
        padding: 0 8px;
        color: $fourth-text-color;
      }
    }
  }

  .el-date-editor .el-range__close-icon {
    @include flex-center;
  }

  .el-table {
    font-size: 13px;

    &::before {
      content: none;
    }

    &__fixed::before {
      content: none;
    }

    &__fixed-right::before {
      content: none;
    }
  }
  .el-pagination.is-background .el-pager li:not(.disabled).active{
    background-color: $purple;
  }
  .el-message-box {
    &__header {
      padding: 24px 0;
    }

    &__content {
      padding: 8px 40px 19px;
    }

    &__title {
      font-size: 17px;
      text-align: center;
    }
  }

  .el-message {
    padding: 9px 16px;

    &--warning,
    &--error,
    &--success {
      color: $text-color;
      background: $white;
      border: none;
      box-shadow: 0 2px 8px $box-shadow-color;

      .el-message__content {
        font-size: 12px;
        color: $text-color;
      }
    }
  }
  .el-radio-button__inner {
    padding: 11px 12px;
    font-weight: 400;
  }
  // .fission-to-get-customers-table-dialog {
  .el-message-box__btns {
    .el-button.el-button--primary {
      background-color: $purple !important;
      border-color: $purple !important;
    }
  }
  // }
}

// icon
.menu-home {
  display: block;
  width: 16px;
  height: 16px;
}
.menu-operation {
  display: block;
  width: 16px;
  height: 16px;
}
.menu-employee {
  display: block;
  width: 16px;
  height: 16px;
}

.menu-marketing {
  display: block;
  width: 16px;
  height: 16px;
}

.menu-user {
  display: block;
  width: 16px;
  height: 16px;
}
